<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>IT技术咨询——慕课网</title>

    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/style.scss">
    <!-- <link rel="stylesheet" href="./css/font_2636378_y8az907b2k/demo.css"> -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3062245_ri0rz7vuy2f.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2636378_cwouzwudqkw.css">
    <link rel="stylesheet" href="../登录注册/css/登录.css样式.css">
    <link rel="stylesheet" href="../登录注册/img/erweima.png">
    <link rel="stylesheet" href="../登录注册/img/signlogo.png">

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2636378_7g6i9h6r13d.css">
    <script src="../jquery-3.6.0.js"></script>
    <script src="../template-web.js"></script>
    <script src="./js/style.js"></script>
    <script src="../登录注册/js/登录js.样式.js"></script>
</head>

<body>
    <!--  clearfix 是清除浮动效果 -->
    <!-- 头部1 -->
    <div id="new_header" class="special-header">
        <div class="page-container new-header clearfix" id="nav">
            <ul class="nav-item">
                <li><a href="#;" target="_self" class="imooc">慕课网首页</a></li>
                <li><a href="#;" target="_self">免费课</a></li>
                <li><a href="#;" target="_self">实战课</a></li>
                <li><a href="#;" class="" target="_self">体系课<i class="icn-new"></i></a></li>
                <li><a href="#;" target="_self">慕课教程</a></li>
                <li><a href="#;" target="_self">专栏</a></li>
                <li><a href="#;" class="active-1" target="_self">手记</a></li>
                <li style="display:none"><a href="#;" target="_self">猿问</a></li>
            </ul>

            <!-- 右边 -->
            <div class="header-right">

                <!-- 搜索框部分 -->
                <div class="search-box">

                    <a href="javascript:void(0);" id="common-nav-search">
                        <i class="iconfont icon-iov-search"></i>
                    </a>
                    <!-- 搜索框 -->
                    <div class="input-search " id="common-input-search" style="display: none;">
                        <div class="input-box">
                            <input type="text" class="nav-search-input" autocomplete="off">
                            <a href="javascript:void(0);" class="nav-searchBtn js-nav-searchBtn">
                                <i class="iconfont icon-iov-search"></i>
                            </a>
                        </div>



                        <div class="nav-search-box ">
                            <div class="hot">
                                <h2>热搜</h2>
                                <div class="hot-box">
                                    <a href="javascript:void(0)" class="hot-item js-history-search">Java工程师</a>
                                    <a href="javascript:void(0)" class="hot-item js-history-search">Vue</a>
                                    <a href="javascript:void(0)" class="hot-item js-history-search">Python</a>
                                    <a href="javascript:void(0)" class="hot-item js-history-search">Go</a>
                                    <a href="javascript:void(0)" class="hot-item js-history-search">SpringBoot</a>
                                    <a href="javascript:void(0)" class="hot-item js-history-search">Docker</a>
                                    <a href="javascript:void(0)" class="hot-item js-history-search">React</a>
                                    <a href="javascript:void(0)" class="hot-item js-history-search">小程序</a>
                                </div>
                            </div>


                            <!-- 点击清空搜索数据 -->
                            <!-- style="display: none;" -->
                            <div class="history hide">
                                <h2>最近搜索<a href="javascript:void(0);" class="history-clear js-clear-history">清空</a></h2>
                                <div class="history-box"></div>
                            </div>
                        </div>

                    </div>
                </div>

                <!--标题收藏夹部分  -->
                <div class="header-favorites">
                    <a href="javascript:0;">收藏网站</a>
                    <div class="favorites-tips">
                        <span class="iconfont icon-summary"></span>
                        使用<b> Ctrl+D </b>可将网站添加到书签
                    </div>
                </div>

                <!-- 矢量图购物车部分 -->
                <div class="shop-cart " id="shop-cart">
                    <!-- 点击跳转购物车信息页面 -->
                    <a href="javascript:void(0)">

                        <!--购物车矢量图  -->
                        <span class="iconfont icon-gouwuchekong"> </span>

                        <!-- style="display: none" -->
                        <!-- 购物车矢量图旁边的0  js-cart-num代表js购物车数量-->
                        <span class="shopping_icon js-cart-num">0</span>
                    </a>

                    <!-- 悬浮显示下面购物车信息 -->
                    <div class="my-cart" id="js-my-cart">
                        <div class="cart-title-box ">
                            <h2 class="l">我的购物车</h2>
                            <h5 class="r">已加入<span class="js-incart-num">0</span>门课程</h5>
                        </div>
                        <!-- 不同课程 -->
                        <div class="cart-wrap">
                            <div class="clear-cart">
                                <span class="iconfont icon-gouwuchekong"></span>
                                <h3>购物车里空空如也</h3>
                                <div class="text">快去这里选购你中意的课程</div>
                                <p><a href="javascript:void(0)">实战课</a></p>
                                <p><a href="javascript:void(0)">体系课</a></p>
                            </div>
                        </div>
                        <!--我的订单中心  -->
                        <div class="more-box">
                            <div class="show-box">
                                <span class="text">
                                    <a href="javascript:void(0)">我的订单中心</a>
                                </span>
                            </div>
                            <a href="javascript:void(0)" class="go-cart">去购物车 </a>
                        </div>
                    </div>
                </div>

                <!-- 登录注册 -->
                <div id="login-area">
                    <ul class="header-unlogin">
                        <!-- <li class="header-signin">
                            <a href="#;" id="js-signin-btn">登录</a> /
                            <a href="#;" id="js-signup-btn">注册</a>
                        </li> -->
                        <li class="li1">
                            <i class="iconfont icon-lingdang"></i>
                        </li>
                        <li class="li2">
                            <p>我的课程</p>
                        </li>

                        <li class="li3">
                            <img src="../用户界面/img/拉克丝.jpg" alt="">
                        </li> 
                    </ul>
                </div>


            </div>
        </div>
    </div>

    <!-- 头部2 -->
    <div id="sub-header">
        <div class="sub-container" id="sub-nav">
            <!-- 左边两张图片 -->
            <a class="article-logo" href="javascript:void(0)">
                <img style="height: 54px" src="./img/download.png" alt="">
                <img style="height: 19px;margin-bottom:10px;" src="./img/article-desc.png" alt="">
            </a>


            <!--  搜索感兴趣知识文章部分 -->
            <!-- 右边 -->
            <div class="search-warp clearfix" style="min-width: 32px;">
                <div class="search-area" data-search="top-banner">
                    <input class="search-input" placeholder="搜索感兴趣的知识和文章" type="text" autocomplete="off">
                    <input type="hidden" class="btn_search">

                </div>

                <div class="showhide-search" data-show="no">
                    <i class="iconfont icon-iov-search"></i>
                </div>
            </div>


            <!-- 写文章登录功能-->
            <!-- 右边 -->
            <div class="operate-area clearfix">
                <span>
                    <a href="../登录注册/登录注册1.html" class="btn btn-blue btn-article">写文章</a>
                </span>

            </div>
        </div>

    </div>


    <!--中间 -->
    <div id="main">

        <!-- 左边物品容器 -->
        <div class="article  clearfix">
            <!-- 左菜单 -->
            <ul class="left_menu l">
                <li class="m_item active">
                    <a href="#;" class="url">推荐</a>
                </li>
                <li class="m_item ">
                    <a href="#;" class="url">资‘讯</a>
                </li>
                <li class="m_item ">
                    <a href="#;" class="url">最新文章</a>
                </li>
                <li class="m_item ">
                    <a href="#;" class="url">区块链</a>

                </li>
                <li class="m_item ">
                    <a href="#;" class="url">人工智能</a>

                </li>
                <li class="m_item m_item-especially">
                    <a href="#;" class="url">云计算/大数据</a>
                    <div class="label-box-wrap">
                        <div class="label-box">
                            <a class="label " href="#;21">
                                云计算
                            </a>
                            <a class="label " href="#;104">
                                容器
                            </a>
                            <a class="label " href="#;105">
                                Kubernetes
                            </a>
                            <a class="label " href="#;101">
                                OpenStack
                            </a>
                            <a class="label " href="#;99">
                                Flink
                            </a>
                            <a class="label " href="#;102">
                                AWS
                            </a>
                            <a class="label " href="#;103">
                                阿里云
                            </a>
                            <a class="label " href="#;100">
                                Storm
                            </a>
                            <a class="label " href="#;98">
                                Hbase
                            </a>
                            <a class="label " href="#;96">
                                Hadoop
                            </a>
                            <a class="label " href="#;97">
                                Spark
                            </a>
                            <a class="label " href="#;167">
                                R语言
                            </a>
                            <a class="label " href="#;73">
                                Docker
                            </a>
                            <a class="label " href="#;141">
                                挖掘
                            </a>
                            <a class="label " href="#;35">
                                大数据
                            </a>

                        </div>
                    </div>
                </li>
                <li class="m_item m_item-especially">
                    <a href="#;" class="url">前端开发</a>
                    <div class="label-box-wrap">
                        <div class="label-box">
                            <a class="label " href="#;53">
                                Sass/Less
                            </a>
                            <a class="label " href="#;52">
                                Vue.js
                            </a>
                            <a class="label " href="#;26">
                                前端工具
                            </a>
                            <a class="label " href="#;25">
                                CSS3
                            </a>
                            <a class="label " href="#;24">
                                Bootstrap
                            </a>
                            <a class="label " href="#;17">
                                JavaScript
                            </a>
                            <a class="label " href="#;15">
                                JQuery
                            </a>
                            <a class="label " href="#;14">
                                Html5
                            </a>
                            <a class="label " href="#;13">
                                Node.js
                            </a>
                            <a class="label " href="#;5">
                                Html/CSS
                            </a>
                            <a class="label " href="#;50">
                                React.JS
                            </a>
                            <a class="label " href="#;22">
                                AngularJS
                            </a>
                            <a class="label " href="#;27">
                                WebApp
                            </a>
                            <a class="label " href="#;88">
                                小程序
                            </a>
                            <a class="label " href="#;177">
                                Typescript
                            </a>

                        </div>
                    </div>

                </li>
                <li class="m_item m_item-especially">
                    <a href="#;" class="url">后端开发</a>
                    <div class="label-box-wrap">
                        <div class="label-box">
                            <a class="label " href="#;54">
                                Ruby
                            </a>
                            <a class="label " href="#;38">
                                C#
                            </a>
                            <a class="label " href="#;31">
                                Go
                            </a>
                            <a class="label " href="#;30">
                                C++
                            </a>
                            <a class="label " href="#;28">
                                C
                            </a>
                            <a class="label " href="#;18">
                                Python
                            </a>
                            <a class="label " href="#;3">
                                JAVA
                            </a>
                            <a class="label " href="#;2">
                                PHP
                            </a>
                            <a class="label " href="#;62">
                                SpringBoot
                            </a>
                            <a class="label " href="#;61">
                                Yii
                            </a>
                            <a class="label " href="#;60">
                                ThinkPHP
                            </a>
                            <a class="label " href="#;116">
                                SSM
                            </a>
                            <a class="label " href="#;124">
                                Django
                            </a>
                            <a class="label " href="#;117">
                                爬虫
                            </a>
                            <a class="label " href="#;90">
                                Flask
                            </a>
                            <a class="label " href="#;129">
                                Spring
                            </a>
                            <a class="label " href="#;125">
                                JVM
                            </a>
                            <a class="label " href="#;128">
                                .NET
                            </a>
                            <a class="label " href="#;127">
                                MVVM
                            </a>
                            <a class="label " href="#;126">
                                laravel
                            </a>
                            <a class="label " href="#;91">
                                Tornado
                            </a>
                            <a class="label " href="#;89">
                                Spring Cloud
                            </a>
                            <a class="label " href="#;171">
                                Swoole
                            </a>

                        </div>
                    </div>

                </li>
                <li class="m_item m_item-especially">
                    <a href="#;" class="url">移动互联</a>
                    <div class="label-box-wrap">
                        <div class="label-box">
                            <a class="label " href="#;19">
                                iOS
                            </a>
                            <a class="label " href="#;12">
                                Android
                            </a>
                            <a class="label " href="#;93">
                                WEEX
                            </a>
                            <a class="label " href="#;92">
                                Ionic
                            </a>
                            <a class="label " href="#;165">
                                React Native
                            </a>
                            <a class="label " href="#;134">
                                gradle
                            </a>
                            <a class="label " href="#;133">
                                Android Studio
                            </a>
                            <a class="label " href="#;132">
                                Kotlin
                            </a>
                            <a class="label " href="#;131">
                                native
                            </a>
                            <a class="label " href="#;130">
                                React
                            </a>
                            <a class="label " href="#;135">
                                Swift
                            </a>

                        </div>
                    </div>

                </li>
                <li class="m_item ">
                    <a href="#;" class="url">工具资源</a>

                </li>
                <li class="m_item m_item-especially">
                    <a href="#;" class="url">职场生活</a>
                    <div class="label-box-wrap">
                        <div class="label-box">
                            <a class="label " href="#;=49">
                                产品
                            </a>
                            <a class="label " href="#;=67">
                                面试
                            </a>
                            <a class="label " href="#;=166">
                                搞笑
                            </a>
                            <a class="label " href="#;=74">
                                幽默段子
                            </a>
                            <a class="label " href="#;=48">
                                征文
                            </a>
                            <a class="label " href="#;=75">
                                资讯
                            </a>
                            <a class="label " href="#;=46">
                                职场生活
                            </a>

                        </div>
                    </div>

                </li>
                <li class="m_item ">
                    <a href="#;" class="url">幽默段子</a>

                </li>
                <li class="m_item m_item-especially">
                    <a href="#;" class="url">其它</a>
                    <div class="label-box-wrap">
                        <div class="label-box">
                            <a class="label " href="#;=146">
                                正则表达式
                            </a>
                            <a class="label " href="#;=143">
                                源码
                            </a>
                            <a class="label " href="#;=76">
                                架构
                            </a>
                            <a class="label " href="#;=77">
                                安全
                            </a>
                            <a class="label " href="#;=149">
                                Git
                            </a>
                            <a class="label " href="#;=148">
                                开源
                            </a>
                            <a class="label " href="#;=147">
                                设计模式
                            </a>
                            <a class="label " href="#;=142">
                                API
                            </a>
                            <a class="label " href="#;=145">
                                操作系统
                            </a>
                            <a class="label " href="#;=78">
                                活动
                            </a>
                            <a class="label " href="#;=169">
                                编解码
                            </a>
                            <a class="label " href="#;=168">
                                ffmpeg
                            </a>

                        </div>
                    </div>

                </li>

            </ul>

            <!--中心列表  -->
            <div class="centerlist l">
                <!-- 1 中间上面部分-->
                <div class="bannerBox clearfix">
                    <div class="leftImg l">
                        <a href='#;'>
                            <img src="./img/60de778609b8a34600000000.png">

                            <div class="bannerDescription">
                                0基础开发Java语音听书项目
                            </div>
                        </a>
                    </div>
                    <div class="rightImg r">
                        <div class="topImg">
                            <a href='#;'>
                                <img src="./img/60de78270909658403920196.png">

                                <div class="bannerDescription2">
                                    <span>0基础开发前端民宿网页</span>
                                </div>
                            </a>
                        </div>
                        <div class="bottomImg">
                            <a href="#;">
                                <img src="./img/61a70a2b09d55bfc09600400.png">
                                <div class="bannerDescription2">
                                    <span>零基础学习Python</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 2 中间下面部分 -->
                <div class="article-wrapper">
                    <div class="padding-block"></div>
                    <!-- 1 -->
                    <div class="article-lwrap">
                        <!-- 图片 -->
                        <div class="imgCon">
                            <img src="./img/61bb45110001ef5811970545-200-200.jpg" alt="">
                        </div>

                        <!-- 文字 -->
                        <div class="list-content">
                            <!-- 文字上 -->
                            <div class="title">
                                <a href="#;">
                                    Go 1.18 Beta1版本发布，支持泛型
                                </a>
                            </div>

                            <!-- 文字收藏 中间-->
                            <div class="collect">
                                <span class="js-collect">收藏</span>
                            </div>
                            <!-- 文字下 -->
                            <div class="list-bottom clearfix">
                                <div class="labels-area l">
                                    <label class="moco-label">
                                        <a href="#;">后端开发</a>
                                    </label>
                                    <div class="browseNum">
                                        <i class="iconfont icon-yanjing"></i>
                                        <span>1116</span>
                                    </div>
                                    <div class="nickName">
                                        <a href="#;">tonybai</a>
                                    </div>
                                    <div class="skill">
                                        <a href="#;"><span>JAVA</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Python</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Go</span></a>
                                    </div>
                                </div>
                                <!-- 时间 -->
                                <div class="createTime r">12.16</div>
                            </div>
                        </div>
                    </div>
                    <!-- 2 -->
                    <div class="article-lwrap">
                        <!-- 图片 -->
                        <div class="imgCon">
                            <img src="./img/61bb45110001ef5811970545-200-200.jpg" alt="">
                        </div>

                        <!-- 文字 -->
                        <div class="list-content">
                            <!-- 文字上 -->
                            <div class="title">
                                <a href="#;">
                                    Go 1.18 Beta1版本发布，支持泛型
                                </a>
                            </div>

                            <!-- 文字收藏 中间-->
                            <div class="collect">
                                <span class="js-collect">收藏</span>
                            </div>
                            <!-- 文字下 -->
                            <div class="list-bottom clearfix">
                                <div class="labels-area l">
                                    <label class="moco-label">
                                        <a href="#;">后端开发</a>
                                    </label>
                                    <div class="browseNum">
                                        <i class="iconfont icon-yanjing"></i>
                                        <span>1116</span>
                                    </div>
                                    <div class="nickName">
                                        <a href="#;">tonybai</a>
                                    </div>
                                    <div class="skill">
                                        <a href="#;"><span>JAVA</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Python</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Go</span></a>
                                    </div>
                                </div>
                                <!-- 时间 -->
                                <div class="createTime r">12.16</div>
                            </div>
                        </div>
                    </div>
                    <!-- 3 -->
                    <div class="article-lwrap">
                        <!-- 图片 -->
                        <div class="imgCon">
                            <img src="./img/61bb45110001ef5811970545-200-200.jpg" alt="">
                        </div>

                        <!-- 文字 -->
                        <div class="list-content">
                            <!-- 文字上 -->
                            <div class="title">
                                <a href="#;">
                                    Go 1.18 Beta1版本发布，支持泛型
                                </a>
                            </div>

                            <!-- 文字收藏 中间-->
                            <div class="collect">
                                <span class="js-collect">收藏</span>
                            </div>
                            <!-- 文字下 -->
                            <div class="list-bottom clearfix">
                                <div class="labels-area l">
                                    <label class="moco-label">
                                        <a href="#;">后端开发</a>
                                    </label>
                                    <div class="browseNum">
                                        <i class="iconfont icon-yanjing"></i>
                                        <span>1116</span>
                                    </div>
                                    <div class="nickName">
                                        <a href="#;">tonybai</a>
                                    </div>
                                    <div class="skill">
                                        <a href="#;"><span>JAVA</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Python</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Go</span></a>
                                    </div>
                                </div>
                                <!-- 时间 -->
                                <div class="createTime r">12.16</div>
                            </div>
                        </div>
                    </div>
                    <!-- 4-->
                    <div class="article-lwrap">
                        <!-- 图片 -->
                        <div class="imgCon">
                            <img src="./img/61bb45110001ef5811970545-200-200.jpg" alt="">
                        </div>

                        <!-- 文字 -->
                        <div class="list-content">
                            <!-- 文字上 -->
                            <div class="title">
                                <a href="#;">
                                    Go 1.18 Beta1版本发布，支持泛型
                                </a>
                            </div>

                            <!-- 文字收藏 中间-->
                            <div class="collect">
                                <span class="js-collect">收藏</span>
                            </div>
                            <!-- 文字下 -->
                            <div class="list-bottom clearfix">
                                <div class="labels-area l">
                                    <label class="moco-label">
                                        <a href="#;">后端开发</a>
                                    </label>
                                    <div class="browseNum">
                                        <i class="iconfont icon-yanjing"></i>
                                        <span>1116</span>
                                    </div>
                                    <div class="nickName">
                                        <a href="#;">tonybai</a>
                                    </div>
                                    <div class="skill">
                                        <a href="#;"><span>JAVA</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Python</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Go</span></a>
                                    </div>
                                </div>
                                <!-- 时间 -->
                                <div class="createTime r">12.16</div>
                            </div>
                        </div>
                    </div>
                    <!-- 5 -->
                    <div class="article-lwrap">
                        <!-- 图片 -->
                        <div class="imgCon">
                            <img src="./img/61bb45110001ef5811970545-200-200.jpg" alt="">
                        </div>

                        <!-- 文字 -->
                        <div class="list-content">
                            <!-- 文字上 -->
                            <div class="title">
                                <a href="#;">
                                    Go 1.18 Beta1版本发布，支持泛型
                                </a>
                            </div>

                            <!-- 文字收藏 中间-->
                            <div class="collect">
                                <span class="js-collect">收藏</span>
                            </div>
                            <!-- 文字下 -->
                            <div class="list-bottom clearfix">
                                <div class="labels-area l">
                                    <label class="moco-label">
                                        <a href="#;">后端开发</a>
                                    </label>
                                    <div class="browseNum">
                                        <i class="iconfont icon-yanjing"></i>
                                        <span>1116</span>
                                    </div>
                                    <div class="nickName">
                                        <a href="#;">tonybai</a>
                                    </div>
                                    <div class="skill">
                                        <a href="#;"><span>JAVA</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Python</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Go</span></a>
                                    </div>
                                </div>
                                <!-- 时间 -->
                                <div class="createTime r">12.16</div>
                            </div>
                        </div>
                    </div>
                    <!-- 6 -->
                    <div class="article-lwrap">
                        <!-- 图片 -->
                        <div class="imgCon">
                            <img src="./img/61bb45110001ef5811970545-200-200.jpg" alt="">
                        </div>

                        <!-- 文字 -->
                        <div class="list-content">
                            <!-- 文字上 -->
                            <div class="title">
                                <a href="#;">
                                    Go 1.18 Beta1版本发布，支持泛型
                                </a>
                            </div>

                            <!-- 文字收藏 中间-->
                            <div class="collect">
                                <span class="js-collect">收藏</span>
                            </div>
                            <!-- 文字下 -->
                            <div class="list-bottom clearfix">
                                <div class="labels-area l">
                                    <label class="moco-label">
                                        <a href="#;">后端开发</a>
                                    </label>
                                    <div class="browseNum">
                                        <i class="iconfont icon-yanjing"></i>
                                        <span>1116</span>
                                    </div>
                                    <div class="nickName">
                                        <a href="#;">tonybai</a>
                                    </div>
                                    <div class="skill">
                                        <a href="#;"><span>JAVA</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Python</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Go</span></a>
                                    </div>
                                </div>
                                <!-- 时间 -->
                                <div class="createTime r">12.16</div>
                            </div>
                        </div>
                    </div>
                    <!-- 7 -->
                    <div class="article-lwrap">
                        <!-- 图片 -->
                        <div class="imgCon">
                            <img src="./img/61bb45110001ef5811970545-200-200.jpg" alt="">
                        </div>

                        <!-- 文字 -->
                        <div class="list-content" style="border: none;">
                            <!-- 文字上 -->
                            <div class="title">
                                <a href="#;">
                                    Go 1.18 Beta1版本发布，支持泛型
                                </a>
                            </div>

                            <!-- 文字收藏 中间-->
                            <div class="collect">
                                <span class="js-collect">收藏</span>
                            </div>
                            <!-- 文字下 -->
                            <div class="list-bottom clearfix">
                                <div class="labels-area l">
                                    <label class="moco-label">
                                        <a href="#;">后端开发</a>
                                    </label>
                                    <div class="browseNum">
                                        <i class="iconfont icon-yanjing"></i>
                                        <span>1116</span>
                                    </div>
                                    <div class="nickName">
                                        <a href="#;">tonybai</a>
                                    </div>
                                    <div class="skill">
                                        <a href="#;"><span>JAVA</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Python</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Go</span></a>
                                    </div>
                                </div>
                                <!-- 时间 -->
                                <div class="createTime r">12.16</div>
                            </div>
                        </div>
                    </div>
                    <!-- 8 -->
                    <div class="article-lwrap">
                        <!-- 图片 -->
                        <div class="imgCon">
                            <img src="./img/61bb45110001ef5811970545-200-200.jpg" alt="">
                        </div>

                        <!-- 文字 -->
                        <div class="list-content" style="border: none;">
                            <!-- 文字上 -->
                            <div class="title">
                                <a href="#;">
                                    Go 1.18 Beta1版本发布，支持泛型
                                </a>
                            </div>

                            <!-- 文字收藏 中间-->
                            <div class="collect">
                                <span class="js-collect">收藏</span>
                            </div>
                            <!-- 文字下 -->
                            <div class="list-bottom clearfix">
                                <div class="labels-area l">
                                    <label class="moco-label">
                                        <a href="#;">后端开发</a>
                                    </label>
                                    <div class="browseNum">
                                        <i class="iconfont icon-yanjing"></i>
                                        <span>1116</span>
                                    </div>
                                    <div class="nickName">
                                        <a href="#;">tonybai</a>
                                    </div>
                                    <div class="skill">
                                        <a href="#;"><span>JAVA</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Python</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Go</span></a>
                                    </div>
                                </div>
                                <!-- 时间 -->
                                <div class="createTime r">12.16</div>
                            </div>
                        </div>
                    </div>
                    <!-- 9 -->
                    <div class="article-lwrap">
                        <!-- 图片 -->
                        <div class="imgCon">
                            <img src="./img/61bb45110001ef5811970545-200-200.jpg" alt="">
                        </div>

                        <!-- 文字 -->
                        <div class="list-content" style="border: none;">
                            <!-- 文字上 -->
                            <div class="title">
                                <a href="#;">
                                    Go 1.18 Beta1版本发布，支持泛型
                                </a>
                            </div>

                            <!-- 文字收藏 中间-->
                            <div class="collect">
                                <span class="js-collect">收藏</span>
                            </div>
                            <!-- 文字下 -->
                            <div class="list-bottom clearfix">
                                <div class="labels-area l">
                                    <label class="moco-label">
                                        <a href="#;">后端开发</a>
                                    </label>
                                    <div class="browseNum">
                                        <i class="iconfont icon-yanjing"></i>
                                        <span>1116</span>
                                    </div>
                                    <div class="nickName">
                                        <a href="#;">tonybai</a>
                                    </div>
                                    <div class="skill">
                                        <a href="#;"><span>JAVA</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Python</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Go</span></a>
                                    </div>
                                </div>
                                <!-- 时间 -->
                                <div class="createTime r">12.16</div>
                            </div>
                        </div>
                    </div>
                    <!-- 10 -->
                    <div class="article-lwrap">
                        <!-- 图片 -->
                        <div class="imgCon">
                            <img src="./img/61bb45110001ef5811970545-200-200.jpg" alt="">
                        </div>

                        <!-- 文字 -->
                        <div class="list-content" style="border: none;">
                            <!-- 文字上 -->
                            <div class="title">
                                <a href="#;">
                                    Go 1.18 Beta1版本发布，支持泛型
                                </a>
                            </div>

                            <!-- 文字收藏 中间-->
                            <div class="collect">
                                <span class="js-collect">收藏</span>
                            </div>
                            <!-- 文字下 -->
                            <div class="list-bottom clearfix">
                                <div class="labels-area l">
                                    <label class="moco-label">
                                        <a href="#;">后端开发</a>
                                    </label>
                                    <div class="browseNum">
                                        <i class="iconfont icon-yanjing"></i>
                                        <span>1116</span>
                                    </div>
                                    <div class="nickName">
                                        <a href="#;">tonybai</a>
                                    </div>
                                    <div class="skill">
                                        <a href="#;"><span>JAVA</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Python</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Go</span></a>
                                    </div>
                                </div>
                                <!-- 时间 -->
                                <div class="createTime r">12.16</div>
                            </div>
                        </div>
                    </div>
                    <!-- 11 -->
                    <div class="article-lwrap">
                        <!-- 图片 -->
                        <div class="imgCon">
                            <img src="./img/61bb45110001ef5811970545-200-200.jpg" alt="">
                        </div>

                        <!-- 文字 -->
                        <div class="list-content" style="border: none;">
                            <!-- 文字上 -->
                            <div class="title">
                                <a href="#;">
                                    Go 1.18 Beta1版本发布，支持泛型
                                </a>
                            </div>

                            <!-- 文字收藏 中间-->
                            <div class="collect">
                                <span class="js-collect">收藏</span>
                            </div>
                            <!-- 文字下 -->
                            <div class="list-bottom clearfix">
                                <div class="labels-area l">
                                    <label class="moco-label">
                                        <a href="#;">后端开发</a>
                                    </label>
                                    <div class="browseNum">
                                        <i class="iconfont icon-yanjing"></i>
                                        <span>1116</span>
                                    </div>
                                    <div class="nickName">
                                        <a href="#;">tonybai</a>
                                    </div>
                                    <div class="skill">
                                        <a href="#;"><span>JAVA</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Python</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Go</span></a>
                                    </div>
                                </div>
                                <!-- 时间 -->
                                <div class="createTime r">12.16</div>
                            </div>
                        </div>
                    </div>
                    <!-- 12 -->
                    <div class="article-lwrap">
                        <!-- 图片 -->
                        <div class="imgCon">
                            <img src="./img/61bb45110001ef5811970545-200-200.jpg" alt="">
                        </div>

                        <!-- 文字 -->
                        <div class="list-content" style="border: none;">
                            <!-- 文字上 -->
                            <div class="title">
                                <a href="#;">
                                    Go 1.18 Beta1版本发布，支持泛型
                                </a>
                            </div>

                            <!-- 文字收藏 中间-->
                            <div class="collect">
                                <span class="js-collect">收藏</span>
                            </div>
                            <!-- 文字下 -->
                            <div class="list-bottom clearfix">
                                <div class="labels-area l">
                                    <label class="moco-label">
                                        <a href="#;">后端开发</a>
                                    </label>
                                    <div class="browseNum">
                                        <i class="iconfont icon-yanjing"></i>
                                        <span>1116</span>
                                    </div>
                                    <div class="nickName">
                                        <a href="#;">tonybai</a>
                                    </div>
                                    <div class="skill">
                                        <a href="#;"><span>JAVA</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Python</span></a>
                                        <i class="iconfont icon-dian"></i>
                                        <a href="#;"><span>Go</span></a>
                                    </div>
                                </div>
                                <!-- 时间 -->
                                <div class="createTime r">12.16</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右边文章侧边栏 -->
            <div id="carefully_selected">
                <!-- 两张背景图 -->
                <div class="carefully_selected">
                    <a href="#;">
                        <div class="sevenImg"></div>
                    </a>
                    <a href="#;">
                        <div class="thirtyImg"></div>
                    </a>
                </div>



                <!--慕课专栏  -->
                <div class="column_recommend ">
                    <div class="title">
                        慕课专栏
                        <a href="#;" class="more">
                            更多
                            <i class="iconfont icon-xiayiye"></i>
                        </a>
                    </div>
                    <ul>
                        <li class="clearfix">
                            <a href="#;">
                                <div class="img l" style="background-image:url(./img/5fc9da670001a27f05400720.png)">
                                </div>
                            </a>
                            <div class="text_con l">
                                <a href="#;">
                                    <p class="title">Java 并发编程深度解析</p>
                                </a>
                                <div class="info">
                                    <span>共54小节</span>
                                    <i class="iconfont icon-dian"></i>
                                    <span>204人已购买</span>
                                </div>
                                <div class="price_con clearfix">
                                    <a href="javascript:;">
                                        <div class="goBuy r">马上订阅</div>
                                    </a>

                                    <p class="ori l">¥ 58.00</p>

                                </div>
                            </div>
                        </li>

                        <li class="clearfix">
                            <a href="#;">
                                <div class="img l" style="background-image:url(./img/5fb36efe0001960e05400720.png)">
                                </div>
                            </a>
                            <div class="text_con l">
                                <a href="#;">
                                    <p class="title">Vue 核心源码详解38讲</p>
                                </a>
                                <div class="info">
                                    <span>共38小节</span>
                                    <i class="iconfont icon-dian"></i>
                                    <span>551人已购买</span>
                                </div>
                                <div class="price_con clearfix">
                                    <!-- 点击会弹出登录验证 -->
                                    <a href="javascript:;">
                                        <div class="goBuy r">马上订阅</div>
                                    </a>

                                    <p class="ori l">¥ 58.00</p>

                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <!--推荐作者-->
                <div class="recommended_author">
                    <!-- 作者列表 -->
                    <div class="clearfix clearfix-lb">
                        <h3 class="l">推荐作者</h3>
                        <div class="more r">
                            <a href="#;">
                                更多
                                <i class="iconfont icon-xiayiye"></i>
                            </a>
                        </div>
                    </div>

                    <!-- 作者信息 -->
                    <div class="personList">
                        <!-- ul列表 -->
                        <ul class="personList-xx">

                            <!--li列表3 -->
                            <li class="person">
                                <!-- 作者头像部分 -->
                                <div class="imgCon-neme">
                                    <!-- 作者头像大小 -->
                                    <div class="imgCon ">
                                        <a href="#;">
                                            <img src="./img/5b16a6b30001000907410741-100-100.jpg" alt="">
                                        </a>
                                    </div>
                                    <!-- 姓名 -->
                                    <div class="text">
                                        <div class="name ">戏虐生</div>
                                        <!-- 文章和粉丝 -->
                                        <p>
                                            <span>20篇文章</span>
                                            <span>1800个粉丝</span>
                                        </p>
                                    </div>

                                    <!-- 关注 -->
                                    <button class="follow ">
                                        <i class="iconfont icon-jiahao1"></i>
                                        关注
                                    </button>
                                </div>
                            </li>
                            <!--li列表4 -->
                            <li class="person">
                                <!-- 作者头像部分 -->
                                <div class="imgCon-neme">
                                    <!-- 作者头像大小 -->
                                    <div class="imgCon ">
                                        <a href="#;">
                                            <img src="./img/54584f540001558402200220-40-40.jpg" alt="">
                                        </a>
                                    </div>
                                    <!-- 姓名 -->
                                    <div class="text">
                                        <div class="name ">那怎么办嘛</div>
                                        <!-- 文章和粉丝 -->
                                        <p>
                                            <span>25文章</span>
                                            <span>28100个粉丝</span>
                                        </p>
                                    </div>

                                    <!-- 关注 -->
                                    <button class="follow ">
                                        <i class="iconfont icon-jiahao1"></i>
                                        关注
                                    </button>
                                </div>
                            </li>
                            <!--li列表5 -->
                            <li class="person">
                                <!-- 作者头像部分 -->
                                <div class="imgCon-neme">
                                    <!-- 作者头像大小 -->
                                    <div class="imgCon ">
                                        <a href="#;">
                                            <img src="./img/5ae9ef520001162304800480-40-40.jpg" alt="">
                                        </a>
                                    </div>
                                    <!-- 姓名 -->
                                    <div class="text">
                                        <div class="name ">冯文议</div>
                                        <!-- 文章和粉丝 -->
                                        <p>
                                            <span>64篇文章</span>
                                            <span>14700个粉丝</span>
                                        </p>
                                    </div>

                                    <!-- 关注 -->
                                    <button class="follow ">
                                        <i class="iconfont icon-jiahao1"></i>
                                        关注
                                    </button>
                                </div>
                            </li>
                            <!--li列表6 -->
                            <li class="person">
                                <!-- 作者头像部分 -->
                                <div class="imgCon-neme">
                                    <!-- 作者头像大小 -->
                                    <div class="imgCon ">
                                        <a href="#;">
                                            <img src="./img/5458633f0001c2a902200220-40-40.jpg" alt="">
                                        </a>
                                    </div>
                                    <!-- 姓名 -->
                                    <div class="text">
                                        <div class="name ">Dwyane_Cod...</div>
                                        <!-- 文章和粉丝 -->
                                        <p>
                                            <span>31篇文章</span>
                                            <span>6249个粉丝</span>
                                        </p>
                                    </div>

                                    <!-- 关注 -->
                                    <button class="follow ">
                                        <i class="iconfont icon-jiahao1"></i>
                                        关注
                                    </button>
                                </div>
                            </li>
                            <!--li列表7 -->
                            <li class="person">
                                <!-- 作者头像部分 -->
                                <div class="imgCon-neme">
                                    <!-- 作者头像大小 -->
                                    <div class="imgCon ">
                                        <a href="#;">
                                            <img src="./img/545867630001795d02200220-40-40.jpg" alt="">
                                        </a>
                                    </div>
                                    <!-- 姓名 -->
                                    <div class="text">
                                        <div class="name ">青春的小奋斗</div>
                                        <!-- 文章和粉丝 -->
                                        <p>
                                            <span>58篇文章</span>
                                            <span>1811个粉丝</span>
                                        </p>
                                    </div>

                                    <!-- 关注 -->
                                    <button class="follow ">
                                        <i class="iconfont icon-jiahao1"></i>
                                        关注
                                    </button>
                                </div>
                            </li>
                            <!--li列表8 -->
                            <li class="person">
                                <!-- 作者头像部分 -->
                                <div class="imgCon-neme">
                                    <!-- 作者头像大小 -->
                                    <div class="imgCon ">
                                        <a href="#;">
                                            <img src="./img/5b2e4d680001fbad09080836-40-40.jpg" alt="">
                                        </a>
                                    </div>
                                    <!-- 姓名 -->
                                    <div class="text">
                                        <div class="name ">晓晨Master</div>
                                        <!-- 文章和粉丝 -->
                                        <p>
                                            <span>30篇文章</span>
                                            <span>18600个粉丝</span>
                                        </p>
                                    </div>

                                    <!-- 关注 -->
                                    <button class="follow ">
                                        <i class="iconfont icon-jiahao1"></i>
                                        关注
                                    </button>
                                </div>
                            </li>
                            <!--li列表9 -->
                            <li class="person">
                                <!-- 作者头像部分 -->
                                <div class="imgCon-neme">
                                    <!-- 作者头像大小 -->
                                    <div class="imgCon ">
                                        <a href="#;">
                                            <img src="./img/5b6d53e10001009902560256-40-40.jpg" alt="">
                                        </a>
                                    </div>
                                    <!-- 姓名 -->
                                    <div class="text">
                                        <div class="name ">CodeSheep程序羊</div>
                                        <!-- 文章和粉丝 -->
                                        <p>
                                            <span>81篇文章</span>
                                            <span>15500个粉丝</span>
                                        </p>
                                    </div>

                                    <!-- 关注 -->
                                    <button class="follow ">
                                        <i class="iconfont icon-jiahao1"></i>
                                        关注
                                    </button>
                                </div>
                            </li>
                            <!--li列表10 -->
                            <li class="person">
                                <!-- 作者头像部分 -->
                                <div class="imgCon-neme">
                                    <!-- 作者头像大小 -->
                                    <div class="imgCon ">
                                        <a href="#;">
                                            <img src="./img/60f78b72000195e806000600-40-40.jpg" alt="">
                                        </a>
                                    </div>
                                    <!-- 姓名 -->
                                    <div class="text">
                                        <div class="name ">徐小夕</div>
                                        <!-- 文章和粉丝 -->
                                        <p>
                                            <span>42篇文章</span>
                                            <span>3556个粉丝</span>
                                        </p>
                                    </div>

                                    <!-- 关注 -->
                                    <button class="follow ">
                                        <i class="iconfont icon-jiahao1"></i>
                                        关注
                                    </button>
                                </div>
                            </li>
                        </ul>

                    </div>

                </div>
                <!--悬浮显示作者信息部分  -->
                <div class="xftb clearfix" style="position: fixed; ">

                    <!-- 3 -->
                    <div class="moco-usercard-dialog " style="display: none;">
                        <div class="moco-usercard-headialog ">
                            <!-- 头像 -->
                            <div class="moco-usercard-head">
                                <a href="#;">
                                    <img src="./img/5b16a6b30001000907410741-100-100.jpg" alt="">
                                </a>
                            </div>

                            <!-- 作者网名字 -->
                            <div class="fs16 bold fs17">
                                <a href="#;">
                                    <span>我是王石长的爸爸</span>
                                    <span class="schoolboy"></span>
                                </a>
                            </div>


                            <!-- 作者职业 -->
                            <div class="fs12  bold ">
                                <span class="moco-usercard-boy"></span>
                                Python
                            </div>

                            <!--  作者自我介绍 -->
                            <div class="fs12-qm ">
                                Python高级开发工程师

                            </div>
                            <!-- 作者手记 -->
                            <div class="moco-usercard-detail-left ">
                                <span>手记&nbsp;&nbsp;&nbsp;&nbsp;16</span>
                                |
                                <span>推荐&nbsp;&nbsp;&nbsp;&nbsp;6</span>
                            </div>
                            <!-- 关注作者 -->
                            <div class="pl30 pr30 mt20">
                                <span>
                                    <i class="iconfont icon-guanzhu1"></i>
                                    关注Ta
                                </span>
                            </div>

                        </div>
                    </div>
                    <!-- 4 -->
                    <div class="moco-usercard-dialog " style="display: none;">
                        <div class="moco-usercard-headialog ">
                            <!-- 头像 -->
                            <div class="moco-usercard-head">
                                <a href="#;">
                                    <img src="./img/54584f540001558402200220-40-40.jpg" alt="">
                                </a>
                            </div>

                            <!-- 作者网名字 -->
                            <div class="fs16 bold fs17">
                                <a href="#;">
                                    <span>那怎么办嘛</span>
                                    <span class="schoolboy"></span>
                                </a>
                            </div>


                            <!-- 作者职业 -->
                            <div class="fs12  bold ">
                                <span class="moco-usercard-gender "></span>
                                Linux系统工程师
                            </div>

                            <!--  作者自我介绍 -->
                            <div class="fs12-qm ">
                                这位同学很懒，木有签名的说～

                            </div>
                            <!-- 作者手记 -->
                            <div class="moco-usercard-detail-left ">
                                <span>手记&nbsp;&nbsp;&nbsp;&nbsp;25</span>
                                |
                                <span>推荐&nbsp;&nbsp;&nbsp;&nbsp;17</span>
                            </div>
                            <!-- 关注作者 -->
                            <div class="pl30 pr30 mt20">
                                <span>
                                    <i class="iconfont icon-guanzhu1"></i>
                                    关注Ta
                                </span>
                            </div>

                        </div>
                    </div>

                    <!-- 5 -->
                    <div class="moco-usercard-dialog" style="display: none;">
                        <div class="moco-usercard-headialog ">
                            <!-- 头像 -->
                            <div class="moco-usercard-head">
                                <a href="#;">
                                    <img src="./img/5ae9ef520001162304800480-40-40.jpg" alt="">
                                </a>
                            </div>

                            <!-- 作者网名字 -->
                            <div class="fs16 bold fs17">
                                <a href="#;">
                                    <span>冯文议</span>
                                    <span class="schoolboy"></span>
                                </a>
                            </div>


                            <!-- 作者职业 -->
                            <div class="fs12  bold ">
                                <span class="moco-usercard-boy "></span>
                                JAVA开发工程师
                            </div>

                            <!--  作者自我介绍 -->
                            <div class="fs12-qm ">
                                我是冯文议，软件开发工程师，专注于程序设...

                            </div>
                            <!-- 作者手记 -->
                            <div class="moco-usercard-detail-left ">
                                <span>手记&nbsp;&nbsp;&nbsp;&nbsp;64</span>
                                |
                                <span>推荐&nbsp;&nbsp;&nbsp;&nbsp;6</span>
                            </div>
                            <!-- 关注作者 -->
                            <div class="pl30 pr30 mt20">
                                <span>
                                    <i class="iconfont icon-guanzhu1"></i>
                                    关注Ta
                                </span>
                            </div>

                        </div>
                    </div>
                    <!-- 6 -->
                    <div class="moco-usercard-dialog " style="display: none;">
                        <div class="moco-usercard-headialog ">
                            <!-- 头像 -->
                            <div class="moco-usercard-head">
                                <a href="#;">
                                    <img src="./img/5458633f0001c2a902200220-40-40.jpg" alt="">
                                </a>
                            </div>

                            <!-- 作者网名字 -->
                            <div class="fs16 bold fs17">
                                <a href="#;">
                                    <span>Dwyane_Cod...</span>
                                    <span class="schoolboy"></span>
                                </a>
                            </div>


                            <!-- 作者职业 -->
                            <div class="fs12  bold ">
                                <span class="moco-usercard-boy"></span>
                                软件工程师
                            </div>

                            <!--  作者自我介绍 -->
                            <div class="fs12-qm ">
                                高级开发工程师 技术公众号——“程序...
                            </div>
                            <!-- 作者手记 -->
                            <div class="moco-usercard-detail-left ">
                                <span>手记&nbsp;&nbsp;&nbsp;&nbsp;31</span>
                                |
                                <span>推荐&nbsp;&nbsp;&nbsp;&nbsp;31</span>
                            </div>
                            <!-- 关注作者 -->
                            <div class="pl30 pr30 mt20">
                                <span>
                                    <i class="iconfont icon-guanzhu1"></i>
                                    关注Ta
                                </span>
                            </div>

                        </div>
                    </div>
                    <!-- 7 -->
                    <div class="moco-usercard-dialog " style="display: none;">
                        <div class="moco-usercard-headialog ">
                            <!-- 头像 -->
                            <div class="moco-usercard-head">
                                <a href="#;">
                                    <img src="./img/545867630001795d02200220-40-40.jpg" alt="">
                                </a>
                            </div>

                            <!-- 作者网名字 -->
                            <div class="fs16 bold fs17">
                                <a href="#;">
                                    <span>青春的小奋斗</span>
                                    <span class="schoolboy"></span>
                                </a>
                            </div>


                            <!-- 作者职业 -->
                            <div class="fs12  bold ">
                                <span class="moco-usercard-boy  "></span>
                                软件测试工程师
                            </div>

                            <!--  作者自我介绍 -->
                            <div class="fs12-qm ">
                                这位同学很懒，木有签名的说～

                            </div>
                            <!-- 作者手记 -->
                            <div class="moco-usercard-detail-left ">
                                <span>手记&nbsp;&nbsp;&nbsp;&nbsp;58</span>
                                |
                                <span>推荐&nbsp;&nbsp;&nbsp;&nbsp;7</span>
                            </div>
                            <!-- 关注作者 -->
                            <div class="pl30 pr30 mt20">
                                <span>
                                    <i class="iconfont icon-guanzhu1"></i>
                                    关注Ta
                                </span>
                            </div>

                        </div>
                    </div>
                    <!-- 8 -->
                    <div class="moco-usercard-dialog " style="display: none;">
                        <div class="moco-usercard-headialog ">
                            <!-- 头像 -->
                            <div class="moco-usercard-head">
                                <a href="#;">
                                    <img src="./img/5b2e4d680001fbad09080836-40-40.jpg" alt="">
                                </a>
                            </div>

                            <!-- 作者网名字 -->
                            <div class="fs16 bold fs17">
                                <a href="#;">
                                    <span>晓晨Master</span>
                                    <span class="schoolboy"></span>
                                </a>
                            </div>


                            <!-- 作者职业 -->
                            <div class="fs12  bold ">
                                <span class="moco-usercard-gender "></span>
                                全栈工程师
                            </div>

                            <!--  作者自我介绍 -->
                            <div class="fs12-qm ">
                                这位同学很懒，木有签名的说～
                            </div>
                            <!-- 作者手记 -->
                            <div class="moco-usercard-detail-left ">
                                <span>手记&nbsp;&nbsp;&nbsp;&nbsp;16</span>
                                |
                                <span>推荐&nbsp;&nbsp;&nbsp;&nbsp;4</span>
                            </div>
                            <!-- 关注作者 -->
                            <div class="pl30 pr30 mt20">
                                <span>
                                    <i class="iconfont icon-guanzhu1"></i>
                                    关注Ta
                                </span>
                            </div>

                        </div>
                    </div>
                    <!-- 9 -->
                    <div class="moco-usercard-dialog " style="display: none;">
                        <div class="moco-usercard-headialog ">
                            <!-- 头像 -->
                            <div class="moco-usercard-head">
                                <a href="#;">
                                    <img src="./img/5b6d53e10001009902560256-40-40.jpg" alt="">
                                </a>
                            </div>

                            <!-- 作者网名字 -->
                            <div class="fs16 bold fs17">
                                <a href="#;">
                                    <span>CodeSheep程...</span>
                                    <span class="moco-Usercard-Signicon"></span>
                                </a>
                            </div>


                            <!-- 作者职业 -->
                            <div class="fs12  bold ">
                                <span class="moco-usercard-gender "></span>
                                JAVA开发工程师
                            </div>

                            <!--  作者自我介绍 -->
                            <div class="fs12-qm ">
                                这位同学很懒，木有签名的说～

                            </div>
                            <!-- 作者手记 -->
                            <div class="moco-usercard-detail-left ">
                                <span>手记&nbsp;&nbsp;&nbsp;&nbsp;81</span>
                                |
                                <span>推荐&nbsp;&nbsp;&nbsp;&nbsp;33</span>
                            </div>
                            <!-- 关注作者 -->
                            <div class="pl30 pr30 mt20">
                                <span>
                                    <i class="iconfont icon-guanzhu1"></i>
                                    关注Ta
                                </span>
                            </div>

                        </div>
                    </div>
                    <!-- 10 -->
                    <div class="moco-usercard-dialog " style="display: none;">
                        <div class="moco-usercard-headialog ">
                            <!-- 头像 -->
                            <div class="moco-usercard-head">
                                <a href="#;">
                                    <img src="./img/60f78b72000195e806000600-40-40.jpg" alt="">
                                </a>
                            </div>

                            <!-- 作者网名字 -->
                            <div class="fs16 bold fs17">
                                <a href="#;">
                                    <span>徐小夕</span>
                                    <span class="schoolboy"></span>
                                </a>
                            </div>


                            <!-- 作者职业 -->
                            <div class="fs12  bold ">
                                <span class="moco-usercard-gender "></span>
                                全栈工程师
                            </div>

                            <!--  作者自我介绍 -->
                            <div class="fs12-qm ">
                                这位同学很懒，木有签名的说～

                            </div>
                            <!-- 作者手记 -->
                            <div class="moco-usercard-detail-left ">
                                <span>手记&nbsp;&nbsp;&nbsp;&nbsp;42</span>
                                |
                                <span>推荐&nbsp;&nbsp;&nbsp;&nbsp;28</span>
                            </div>
                            <!-- 关注作者 -->
                            <div class="pl30 pr30 mt20">
                                <span>
                                    <i class="iconfont icon-guanzhu1"></i>
                                    关注Ta
                                </span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div id="footer">
        <div class="waper">
            <div class="footerwaper clearfix">
                <!-- 4个矢量图部分 -->
                <div class="followus r">
                    <!-- 收藏 -->
                    <div class="followus-favorites">
                        <a href="javascript:;" title="收藏">
                            <span class="iconfont icon-pingjia-xianxing3-0"></span>
                            <div class="favorites-tips">
                                <span class="iconfont icon-pingjia-xianxing3-0">

                                </span>
                                使用<b> Ctrl+D </b>可将网站添加到书签
                            </div>
                        </a>
                    </div>
                    <!-- 微信 -->
                    <div class="followus-weixin">
                        <a href="javascript:;" title="微信">
                            <span class="iconfont icon-weixin2"></span>
                            <div class="flw-weixin-box"></div>
                        </a>
                    </div>
                    <!-- 新浪微博 -->
                    <div class="followus-weibo">
                        <a href="#;" title="新浪微博">
                            <span class="iconfont icon-weibo"></span>
                        </a>
                    </div>
                    <!-- QQ -->
                    <div class="followus-qzone">
                        <a href="#;" title="QQ空间">
                            <span class="iconfont icon-qq"></span>
                        </a>
                    </div>

                </div>
                <!-- 文字部分 -->
                <div class="footer_intro l">
                    <div class="footer_link">
                        <ul style="display: flex;">
                            <li><a href="#;">网站地图</a></li>
                            <li><a href="#;">网站首页</a></li>
                            <li><a href="#;" title="企业服务">企业服务</a></li>
                            <li><a href="#;">关于我们</a></li>
                            <li> <a href="#;">联系我们</a></li>
                            <li> <a href="#;">讲师招募</a></li>
                            <li> <a href="#;">帮助中心</a></li>
                            <li> <a href="#;">意见反馈</a></li>
                            <li><a href="#;">慕课大学</a></li>
                            <li><a href="#;">代码托管</a></li>
                        </ul>
                    </div>
                    <p>Copyright
                        <img class="moco-emoji" alt="©" src="./img/a9.png"> 2021 imooc.com All Rights Reserved |
                        <a rel="nofollow" href="#;" style="color: #93999F;">
                            京ICP备 12003892号-11
                        </a>
                        <a rel="nofollow" href="#;" style="color: #93999F;margin:0 5px;">
                            <i class="beian">

                            </i>京公网安备11010802030151号
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>


    <!--固定位置 -->
    <div id="J_GotoTop" class="elevator">
        <a href="#;" class="elevator-msg" >
            <i class="iconfont icon-yijianfankui"></i>
            <span class="">意见反馈</span>
        </a>
        <a href="#; " class="elevator-faq" >
            <i class="iconfont icon-bangzhuzhongxin1"></i>
            <span class="">帮助中心</span>
        </a>
        <a href="#;"  class="elevator-app">
            <i class="iconfont icon-shouji1"></i>
            <span class="">APP下载</span>
            <div class="elevator-app-box"></div>
        </a>
        <a href="javascript:void(0)" class="elevator-weixin " id="js-elevator-weixin">
            <i class="iconfont icon-weixin2"></i>
            <span class="">官方微信</span>
            <div class="elevator-weixin-box"></div>
        </a>
        <!--  -->
        <a href="javascript:void(0)" class="elevator-top " style="display: none;" id="backTop">
            <i class="iconfont icon-hm_arrow_up_light"></i>
            <span class="">返回顶部</span>
        </a>
    </div>


    <!-- 登录页面  -->
    <div class="Seite" a1='true' style="display: none;">

        <div class="login-wrap">

            <!-- style="display: none;" -->
            <!-- 账号中间与验证码登录 -->
            <!-- 账号登录 -->
            <div id="signin" class="rl-modal" style="box-shadow: none;">

                <div class="rl-modal-header">
                    <h1>
                        <span class="active-title ">账号登录</span>
                        <span class="xa-showPhoneSignin  ">验证码登录</span>
                    </h1>
                </div>
                <!-- 上半身登录验证 -->
                <div class="rl-modal-body">
                    <div class="clearfix">
                        <form id="signup-form">

                            <!-- 登录 -->
                            <div class="rlf-group pr">
                                <input type="text" value="" class="xa-emailOrPhone ipt ipt-email js-own-name"
                                    placeholder="请输入登录手机号/邮箱">

                                <!-- 账号验证判断登录失败弹出这个 -->
                                <p class="rlf-tip-wrap errorHint color-red" style="display: none;">请输入正确的邮箱或手机号</p>

                            </div>
                            <!-- 密码 -->
                            <div class="rlf-group  pr has-error">
                                <a href="javascript:void(0)" class="proclaim-btn iconfont icon-yanjing">

                                </a>
                                <input type="password" class="ipt ipt-pwd js-loginPassword js-pass-pwd"
                                    placeholder="请输入密码">
                                <!-- 密码验证判断登录失败弹出这个 -->
                                <p class="rlf-tip-wrap errorHint color-red " style="display: none;">
                                    请输入6-20位密码，区分大小写，不能使用空格！</p>
                            </div>

                            <!-- 单选框部分 -->
                            <div class="rlf-group  form-control  clearfix">
                                <!-- 左边 -->
                                <label for="auto-signin" class="rlf-autoin l">
                                    <!-- 单选框默认  checked='checked' -->
                                    <input type="checkbox" checked='checked' class="auto-cbx" id="auto-signin">7天内自动登录

                                </label>
                                <!-- 右边 -->
                                <div class="fle-rlf r ">
                                    <a href="#;" class="rlf-forget ">忘记密码</a>
                                    <div class="rlf-line"></div>
                                    <a href="#;" class="rlf-forget">遇到问题</a>
                                </div>

                            </div>

                            <!-- 红色登录按钮部分 -->
                            <div class="rlf-group ">
                                <input type="button" value="登录" class="moco-btn moco-btn-red  xa-login">
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 下半身快速注册 -->
                <div class="rl-model-footer">

                    <!-- 快速注册按钮 -->
                    <div class="pop-login-signup-box">
                        <span class="xa-showSignup">快速注册</span>
                    </div>

                    <!-- 下面三张图片 点击弹出扫码登录 -->
                    <div class="pop-login-sns ">
                        <a href="javascript:void(0)" class="pop-sns-weixin">
                            <i class="iconfont icon-weixin2"></i>
                        </a>
                        <a href="javascript:void(0)" class="pop-sns-qq">
                            <i class="iconfont icon-qq"></i>
                        </a>
                        <a href="javascript:void(0)" class="pop-sns-weibo">
                            <i class="iconfont icon-weibo">

                            </i>
                        </a>
                    </div>

                    <!-- 《隐私政策》 -->
                    <div class="privacy_tip">登录即同意慕课网
                        <a href="#;">《隐私政策》</a>
                    </div>

                    <!-- 右下角二维码 -->
                    <div class="erweima xa-showQrcode">

                    </div>
                </div>

            </div>

            <!-- 验证码登录-->
            <div class="rl-modal-dl" style="display: none;box-shadow: none;">
                <div class="rl-modal-header">
                    <h1>
                        <span class="xa-showPhoneSignin">账号登录</span>
                        <span class="active-title ">验证码登录</span>
                    </h1>
                </div>
                <!-- 上部分 -->
                <div class="rl-modal-body clearfix">
                    <form class="signup-form">
                        <!--短信验证登录 -->
                        <div class="rlf-group">
                            <div class="rlf-areacode">+86</div>
                            <input type="text" value="" class="ipt ipt-phone" placeholder="短信登录仅限中国大陆用户">
                        </div>
                        <!-- 获取验证码登录 -->
                        <div class="rlf-group">
                            <input type="text" id="js-phoneVerity" class="ipt ipt-pwd" placeholder="请输入短信验证码">
                            <p class="reSend-e active ">
                                <span class="js-signin-send">获取验证码</span>
                            </p>

                        </div>

                        <!-- 找回账号 -->
                        <div class="rlf-group rlf-appendix  clearfix" style="margin-top: 20px;margin-bottom: 10px;">
                            <label for="auto-signin" class="rlf-autoin ">
                                <input type="checkbox" checked="checked" class="auto-cbx" id="auto-signin">7天内自动登录
                            </label>
                            <a href="#;" class="rlf-forget r">找回账号</a>
                        </div>

                        <!-- 登录部分 -->
                        <div class="rlf-group clearfix">
                            <input type="button" value="登录" class="moco-btn moco-btn-red ">
                        </div>
                    </form>
                </div>
                <!-- 下部分 -->
                <div class="rl-model-footer">

                    <!-- 快速注册按钮 -->
                    <div class="pop-login-signup-box">
                        <span class="xa-showSignup">快速注册</span>
                    </div>

                    <!-- 下面三张图片 点击弹出扫码登录 -->
                    <div class="pop-login-sns ">
                        <a href="javascript:void(0)" class="pop-sns-weixin">
                            <i class="iconfont icon-weixin2"></i>
                        </a>
                        <a href="javascript:void(0)" class="pop-sns-qq">
                            <i class="iconfont icon-qq"></i>
                        </a>
                        <a href="javascript:void(0)" class="pop-sns-weibo">
                            <i class="iconfont icon-weibo">

                            </i>
                        </a>
                    </div>

                    <!-- 《隐私政策》 -->
                    <div class="privacy_tip">登录即同意慕课网
                        <a href="#;">《隐私政策》</a>
                    </div>

                    <!-- 右下角二维码 -->
                    <div class="erweima xa-showQrcode">

                    </div>
                </div>
            </div>

            <!-- 快速注册中间 -->
            <!--  -->
            <div id="signup" class="rl-model-signup" style="display: none; box-shadow: none;">
                <div class="rl-modal-header">
                    <h1 class="black-title">快速注册</h1>
                </div>

                <div class="rl-modal-body">
                    <!-- 验证功能区 -->
                    <form id="signup-form " class="signup-form">
                        <!-- 注册手机号 -->
                        <div class="rlf-group-e ">
                            <div class="rlf-areacode l">+
                                <span>86</span>
                                <i class="iconfont icon-xuanze-xianxing3-0"></i>
                            </div>
                            <input type="text" value="" placeholder="请输入注册手机号" class="ipt-phone">

                        </div>
                        <!-- 验证码 -->
                        <div class="rlf-group-e">
                            <input type="text" id="js-phoneVerity" class="ipt-pwd" placeholder="请输入短信验证码">
                            <p class="reSend  active">
                                <span class="js-signup-send">获取验证码</span>

                            </p>
                            <p class="subtitle" style="display: none">短信验证码已发送至手机
                                <span class="js-phoneNumber"></span>
                            </p>
                        </div>

                        <div class="rlf-group-e rlf-appendix  " style="padding: 6px;">
                            <label for="signup-protocol" class="rlf-autoin">
                                <input type="checkbox" class="auto-cbx" id="signup-protocol">同意
                                <a class="ipt-agreement" href="#;">《慕课网注册协议》</a>&amp;
                                <a href="#;" class="ipt-agreement">《隐私政策》</a>
                            </label>
                        </div>
                        <!-- 验证通过就可以点击立即注册， 就会注册成功-->
                        <div class="rlf-group-e ">
                            <a href="javascript:void(0)" id="signup-btn" class="moco-btn moco-btn-red">
                                立即注册
                            </a>
                        </div>
                    </form>

                    <!-- 返回登录 -->
                    <div class="rl-model-footer">
                        <div class="pop-login-signup-box ">
                            <span class="xa-showSignin">
                                返回账号登录
                            </span>
                        </div>
                        <div class="pop-login-sns ">
                            <a href="javascript:void(0)" class="pop-sns-weixin">
                                <i class="iconfont icon-weixin2"></i>
                            </a>
                            <a href="javascript:void(0)" class="pop-sns-qq">
                                <i class="iconfont icon-qq"></i>
                            </a>
                            <a href="javascript:void(0)" class="pop-sns-weibo">
                                <i class="iconfont icon-weibo"></i>
                            </a>
                        </div>
                    </div>

                    <!--电话区号箱 -->
                    <div class="areacode-box js-code-box" a='false' style="display: none;">
                        <ul class="code-tab">
                            <li class="curr js-code-tab">常用</li>
                            <li class="js-code-tab">A</li>
                            <li class="js-code-tab">B</li>
                            <li class="js-code-tab">C</li>
                            <li class="js-code-tab">D</li>
                            <li class="js-code-tab">E</li>
                            <li class="js-code-tab">F</li>
                            <li class="js-code-tab">G</li>
                            <li class="js-code-tab">H</li>
                            <li class="js-code-tab">J</li>
                            <li class="js-code-tab">K</li>
                            <li class="js-code-tab">L</li>
                            <li class="js-code-tab">M</li>
                            <li class="js-code-tab">N</li>
                            <li class="js-code-tab">P</li>
                            <li class="js-code-tab">R</li>
                            <li class="js-code-tab">S</li>
                            <li class="js-code-tab">T</li>
                            <li class="js-code-tab">W</li>
                            <li class="js-code-tab">X</li>
                            <li class="js-code-tab">Y</li>
                            <li class="js-code-tab">Z</li>
                        </ul>
                        <div class="code-title"><span>常用</span></div>
                        <!-- 地区 -->
                        <div class="code-list nano has-scrollbar">
                            <ul class="nano-content js-code-list">
                                <li>中国澳门（+853 ）</li>
                                <li>中国台湾（+886 ）</li>
                                <li>中国香港（+852 ）</li>
                                <li>中国大陆（+86 ）</li>
                                <li>美国（+1 ）</li>
                                <li>加拿大（+1 ）</li>
                                <li>日本（+81 ）</li>
                                <li>韩国（+82 ）</li>
                                <li>新西兰（+64 ）</li>
                                <li>马来西亚（+60 ）</li>
                                <li>英国（+44 ）</li>
                            </ul>

                        </div>
                    </div>


                </div>
            </div>

            <!-- 二维码登录中间 -->

        </div>

    </div>


    <!-- 登录注册背景阴影 -->
    <div class="modal-backdrop " style="display: none;"></div>
    <script>

    </script>
</body>

</html>